<template>
  <div :class="$style.wrap">
    <FormContainer :column="2">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
        <el-form-item label="电话" prop="phone">
          <el-input v-model="formData.phone" number placeholder="请输入电话" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <Button type="primary" @click="callOutHandle">呼出</Button>
        </el-form-item>
        <el-form-item label="通话记录" prop="content" :span="24">
          <el-input v-model="formData.content" type="textarea" :autosize="{minRows:4}" placeholder="请输入通话记录" clearable></el-input>
        </el-form-item>
        <el-form-item :span="24">
          <div class="button-container" style="padding-top:0">
            <!-- <Button type="primary" @click="saveHandle">暂存</Button> -->
            <Button type="primary" @click="submitHandle">提交</Button>
          </div>
        </el-form-item>
      </el-form>
    </FormContainer>
    <CallOut ref="callOut"></CallOut>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import { putCreate } from '@/api/telRecord'
export default {
  name: 'CallCare',
  components: {
    FormContainer
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const validatorPhone = (r, v, c) => {
      if (/^(1\d{10})|(\d{11,12})$/.test(v)) {
        c()
      } else {
        c(new Error('输入的电话号码格式不正确'))
      }
    }
    return {
      callinfo: {},
      formData: {
        phone: '',
        content: ''
      },
      formRules: {
        phone: [{ required: true, message: '请输入电话号码', trigger: 'change' },
          { validator: validatorPhone, trigger: 'change' }]
      }
    }
  },
  watch: {
    info: {
      handler(n) {
        if (n.careObjectPhone) {
          this.$set(this.formData, 'phone', n.careObjectPhone)
        }
      },
      immediate: true
    }
  },
  methods: {
    callOutHandle() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validateField(['phone'], errMsg => {
          if (errMsg) {
            reject(errMsg)
          } else {
            const callback = (status, callinfo) => {
              if (status === 'success') {
                resolve()
                this.callinfo = callinfo
                this.saveTelRecord(callinfo)
              }
              if (status === 'failed') {
                reject()
              }
            }
            this.$refs.callOut.debounceCallOut(this.formData.phone, { callback }).catch(() => {
              reject()
            })
          }
        })
      })
    },
    // 暂存
    saveHandle() {
      return this.$refs.form.validate().then(() => {
        console.log(this.formData)
      })
    },
    // 提交
    submitHandle() {
      return this.$refs.form.validate().then(() => {
        if (this.callinfo.recordId === undefined) {
          this.$message.info('请先进行电话关怀！')
          return
        }
        this.saveTelRecord(this.callinfo, this.formData.content).then(() => {
          this.$message.success('提交成功！')
        })
      })
    },
    // 修改通话记录
    saveTelRecord(callinfo, content) {
      const data = {
        businessCode: this.info.taskCode,
        businessType: 2, // 业务任务类型1：工单 2：关怀 3：回访 4:crm
        id: callinfo.recordId,
        customerName: this.info.careObject || this.info.customerName || ''
      }
      if (content) {
        data.content = content
      }
      return putCreate(data)
    }
  }
}
</script>
<style lang='scss' module>
.wrap{

}
</style>
